<template>
  <div class="l-rblock l-form-viewer" style="padding: 16px">
    <p class="viewTitle">基础信息</p>

    <el-form
      label-position="left"
      label-width="90px"
      :model="this.sonRow"
      style="height: 230px; margin-top: 20px"
      class="viewForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号:">
            <span>{{ this.sonRow.f_Number }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="" class="alignRight">
            <span v-if="this.sonRow.f_State == '0'" style="color: #04b751"
              >状态:正常</span
            >
            <span v-else-if="this.sonRow.f_State == '1'" style="color: #ff0000"
              >状态:异常</span
            >
            <span v-else>未知</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="设备类型:">
            <span>{{ this.sonRow.f_Type }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称:">
            <span>{{ this.sonRow.f_Name }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="设备位置:">
            <span>{{ this.sonRow.f_Address }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="设备供应商:">
            <span>{{ this.formData.SupplierName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="规格型号:">
            <span>{{ this.sonRow.f_Model }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="购买日期:">
            <span>{{
              lr_dateFormat(this.sonRow.f_BuyDate, "yyyy-MM-dd")
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="维保到期:">
            <span>{{
              lr_dateFormat(this.sonRow.f_MaintainDate, "yyyy-MM-dd")
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="报废日期:">
            <span>{{
              lr_dateFormat(this.sonRow.f_ScrapDate, "yyyy-MM-dd")
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责人:">
            <span>{{ lr_userName(this.sonRow.f_Principal) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <p class="viewTitle">运行状况</p>
    <div class="echartsAllDemo">
      <div :style="{ width: '48%', height: '100%' }">
        <l-echarts :option="gaugeOptions" :style="{ width:'100%', height:'209px'}" ref="main"></l-echarts>
        <p class="textCenter">实时运行速度m/s</p>
      </div>

      <div :style="{ width: '52%', height: '100%' }">
        <l-echarts :option="lineOptions" :style="{ width: '100%', height: '100%' }"></l-echarts>
      </div>
    </div>
  </div>
</template>

<script>
const api= window.$api.erpcase.material    // 这是获取echarts图表数据的接口
export default {
  props: ["sonRow"],
  data() {
    return {
      formData: {
          SupplierName:"", // 供应商名称
      },
      gaugeOptions:{  // echarts仪表盘
        series: [
          {
            type: "gauge",
            radius: "115%",
            center: ["40%", "60%"],
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.2, "#67e0e3"],
                  [0.8, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 15,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 28,
              fontSize: 14,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: (Math.random() * 100).toFixed(),
                name: "m",
              },
            ],
            title: {
              offsetCenter: [0, "-25%"],
            },
          },
        ],
      }, 
      
      lineOptions:{   // 折线图仪表盘
        color: ["#00CACF"],
        title: {
          text: "生产效率",
          subtext: "单位：个",
          textStyle: {
            fontSize: 14,
            fontWeight: 400,
            color: "#333333",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["4:00", "8:00", "12:00", "16:00", "20:00", "24:00"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: this.sonRow.f_Number,
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: true,
            areaStyle: {
              opacity: 0.8,
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00CACF",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              (Math.random() * 100).toFixed(),
              (Math.random() * 100).toFixed(),
              (Math.random() * 100).toFixed(),
              (Math.random() * 100).toFixed(),
              (Math.random() * 100).toFixed(),
              (Math.random() * 100).toFixed(),
            ],
          },
        ],
      },

      timer: null, // 定时器
    };
  },
  async mounted() {
    this.start();
    this.init()
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    init(){
        const data = this.lr_DataSource('ERP_Suppliers')
        this.formData.SupplierName=data.find(t=>t.f_id == this.sonRow.f_Supplier).f_name || {}
    },
    // 定时器
    start() {
      this.timer = setTimeout(this.getOption, 1500);
    },

    // 仪表盘数据需要更新，折线图每次打开都会有新的数据，这里没有必要更新
    async getOption(){
      let queryData={}
      let data= await this.$awaitWraper(api.getrunstate(queryData))
      this.gaugeOptions.series[0].data[0].value=data.data_gauge[0]
      let option=this.gaugeOptions
      this.$refs.main.updateChart(option)
       this.timer = setTimeout(this.getOption, 1500);
    },
  },
};
</script>






<style lang="scss">
.viewForm .el-form-item__label {
  line-height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
 .viewForm .el-form-item__content {
  line-height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.el-form-item.alignRight .el-form-item__content {
  text-align: right;
}
.textCenter {
  padding-left: 130px;
  padding-top: 10px;
}

.viewTitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.echartsAllDemo {
  width: 100%;
  height: 280px;
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
}
</style>